import { ref, nextTick } from 'vue';

/**
 * 地图拖动优化Hook
 * 用于优化地图拖动时弹窗位置更新的性能
 */
export function useMapDragOptimization() {
  const isDragging = ref(false);
  const updateQueue = ref<Array<{ id: string; position: { x: number; y: number } }>>([]);
  let animationFrameId: number | null = null;
  let lastUpdateTime = 0;
  const throttleInterval = 16; // 约60fps

  /**
   * 节流处理位置更新
   * @param callback 更新回调函数
   */
  const throttledUpdate = (callback: () => void) => {
    const now = Date.now();

    if (now - lastUpdateTime >= throttleInterval) {
      callback();
      lastUpdateTime = now;
    } else {
      // 如果有待处理的动画帧，取消它
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }

      // 安排在下一个动画帧执行
      animationFrameId = requestAnimationFrame(() => {
        callback();
        lastUpdateTime = Date.now();
        animationFrameId = null;
      });
    }
  };

  /**
   * 添加位置更新到队列
   * @param updates 位置更新数组
   */
  const queuePositionUpdates = (updates: Array<{ id: string; position: { x: number; y: number } }>) => {
    // 合并更新，避免重复的id
    const updateMap = new Map();

    // 先处理现有队列中的更新
    updateQueue.value.forEach((update) => {
      updateMap.set(update.id, update);
    });

    // 再处理新的更新
    updates.forEach((update) => {
      updateMap.set(update.id, update);
    });

    updateQueue.value = Array.from(updateMap.values());
  };

  /**
   * 处理队列中的位置更新
   * @param updateCallback 实际执行更新的回调
   */
  const processUpdateQueue = (updateCallback: (updates: Array<{ id: string; position: { x: number; y: number } }>) => void) => {
    if (updateQueue.value.length > 0) {
      const updates = [...updateQueue.value];
      updateQueue.value = [];
      updateCallback(updates);
    }
  };

  /**
   * 开始拖动优化
   */
  const startDragOptimization = () => {
    isDragging.value = true;
    updateQueue.value = [];
    console.log('开始地图拖动优化');
  };

  /**
   * 结束拖动优化
   * @param updateCallback 最终更新回调
   */
  const endDragOptimization = (updateCallback?: (updates: Array<{ id: string; position: { x: number; y: number } }>) => void) => {
    isDragging.value = false;

    // 清理待处理的动画帧
    if (animationFrameId) {
      cancelAnimationFrame(animationFrameId);
      animationFrameId = null;
    }

    // 处理剩余的更新
    if (updateCallback) {
      processUpdateQueue(updateCallback);
    }

    console.log('结束地图拖动优化');
  };

  /**
   * 优化的拖动处理
   * @param updates 位置更新
   * @param updateCallback 更新回调
   */
  const handleDragUpdate = (
    updates: Array<{ id: string; position: { x: number; y: number } }>,
    updateCallback: (updates: Array<{ id: string; position: { x: number; y: number } }>) => void
  ) => {
    if (!isDragging.value) {
      // 如果不在拖动状态，直接更新
      updateCallback(updates);
      return;
    }

    // 添加到队列
    queuePositionUpdates(updates);

    // 节流处理更新
    throttledUpdate(() => {
      processUpdateQueue(updateCallback);
    });
  };

  /**
   * 批量处理缩放更新
   * @param updates 位置更新
   * @param updateCallback 更新回调
   */
  const handleZoomUpdate = (
    updates: Array<{ id: string; position: { x: number; y: number } }>,
    updateCallback: (updates: Array<{ id: string; position: { x: number; y: number } }>) => void
  ) => {
    // 缩放时立即更新，因为缩放通常不会像拖动那样频繁
    nextTick(() => {
      updateCallback(updates);
    });
  };

  /**
   * 清理资源
   */
  const cleanup = () => {
    if (animationFrameId) {
      cancelAnimationFrame(animationFrameId);
      animationFrameId = null;
    }
    updateQueue.value = [];
    isDragging.value = false;
  };

  return {
    isDragging,
    startDragOptimization,
    endDragOptimization,
    handleDragUpdate,
    handleZoomUpdate,
    cleanup
  };
}
